<template>
  <view class="video-wrapper">
    <view class="video-label">观看技巧点睛内容，学习重点句型使用方式</view>

    <video id="video-player" class="video-player" :enable-progress-gesture="false" :src="`${env.prefixUrl}${videoUrl}`"
      object-fit="fill" controls @error="videoPlayError" @ended="videoPlayEnd"></video>

    <button class="video-button" @click="handleOperate">
      <template v-if="props.isReStart">
        退出
      </template>
      <template v-else>
        <template v-if="props.isRelearn">
          重新开始
        </template>
        <template v-if="!props.isRelearn">
          Lesson2
          <image class="video-button-right" src="https://rwstatic.tentons.cn/web/Lesson/images/button-right-icon.png" />
        </template>
      </template>
    </button>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import env from "@/config/env";
import { util } from "@/utils/util";
import API from "@/api";

interface IProps {
  section_id: string;
  isRelearn: boolean; // 是否继续学习
  isReStart: boolean; // 是否再次继续学习
}

const store = useStore();
const props = withDefaults(defineProps<IProps>(), {
  section_id: "",
  isRelearn: false,
  isReStart: false,
})

const videoUrl = ref("");
const isPlayEnd = ref(false);

onMounted(async () => {
  if (props.section_id) {
    const result = await API.oralImitationVideo({ section_id: props.section_id }) as { video: string };

    videoUrl.value = result.video;
    console.log("result", result);
  }
})

const emits = defineEmits<{
  (e: "reStart", payload?: any): void;
}>();

const videoPlayError = () => {
  util.showDialogue("视频播放出错");
};

const videoPlayEnd = async () => {
  isPlayEnd.value = true;
}

const handleOperate = () => {
  if (!props.isRelearn && !isPlayEnd.value) {
    return util.showDialogue("请先观看完视频");
  }

  if (props.isReStart) {
    uni.reLaunch({
      url: "/pages/lowPricedCourse/trialCourseHome/trialCourse/index",
    })
  } else {
    if (props.isRelearn) {
      emits("reStart");
    } else {
      const temp = uni.getStorageSync("lowCourseMap");
      if (!temp) {
        return util.showDialogue("当前课程不存在");
      }
      const courseMap = new Map(JSON.parse(temp));
      const course = courseMap.get(Number(store.state.currentDataId)) as any;

      if (!course || course?.next_free_talk_id === -1) {
        return util.showDialogue("当前课程不存在");
      }

      uni.reLaunch({
        url: `/pages/lowPricedCourse/trialCourseHome/transitionPage/index?free_talk_id=${course?.next_free_talk_id}&isSynthesis=${false}&section_id=${props.section_id}}&day_num=${2}`,
      });
    }
  }
}

</script>

<style scoped lang="scss">
.video-wrapper {
  width: 100%;

  .video-label {
    margin-left: 2rem;
    margin-bottom: 2rem;
    font-size: 1.6rem;
    font-family: xiaolai;
    color: $uni-text-color;
  }

  .video-player {
    display: flex;
    justify-content: center;
    width: 34.3rem;
    height: 19.5rem;
    margin: 0 auto;
    border-radius: 1.2rem;
    border: 2px solid $uni-text-color;
  }

  .video-button {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31.5rem;
    height: 5rem;
    margin: 0;
    border-radius: 1rem;
    color: $uni-text-color;
    font-family: xiaolai;
    font-size: 1.7rem;
    border: 2px solid $uni-btn-border;
    background-color: $uni-btn-prime;

    .video-button-right {
      width: 1.2rem;
      height: 1.2rem;
    }
  }

  .is-hover {
    color: rgba(255, 255, 255, 0.6);
  }
}
</style>